<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定class</title>
  </head>
  <style>
    .container {
      width: 1000px;
      height: 300px;
      margin: 0 auto;
      border: 1px solid #ccc;
      text-align: center;
      align-items: center;
      line-height: 300px;
    }


    .font1 {
      font-size: 50px;
    }


    .sad {
      background-color: green;
    }

    .normal {
      background-color: lightblue;
    }

    .happy {
      background-color: yellow;
    }
  </style>

  <body>
    <!-- 
      绑定样式:使用字符串写法,适用于样式的类名不确定，需要动态指定
     -->
    <div id="app">
      <div class="container" :class="font">
        {{message}}
      </div>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        message: "你好，世界",
        font: 'font1'
      },
    })
  </script>

</html>